
<mat-card class="mb-0">
  <mat-card-content>

    <div class="col-12" *ngIf="!sqlIte">

      <h3 class="fw-bold">Not Available</h3>

      <p>
        In order to use Machine Learning and AI with Magic, you'll need to use SQLite as your primary database.
      </p>

    </div>

    <div *ngIf="sqlIte && !configured" class="row">

      <div class="col-12 mb-3">

        <h3 class="fw-bold">Chatbot Wizard</h3>

        <p class="text-muted">
          Before you can create a chatbot you need to supply your OpenAI API key, your reCAPTCHA site-key and secret.
        </p>

      </div>

      <div class="col-12 text-end">

        <button
          mat-button
          color="primary"
          (click)="manageOpenAI()">
          Configure OpenAI API key
        </button>

        <button
          mat-button
          color="primary"
          (click)="manageCAPTCHA()">
          Configure reCAPTCHA
        </button>

      </div>

    </div>

    <form class="row" (ngSubmit)="createBot()" *ngIf="sqlIte && configured">

      <div class="col-12 mb-3">

        <h3 class="fw-bold">Chatbot Wizard</h3>

        <p class="text-muted">
          Provide me with a URL and I will crawl and scrape the website
        </p>

      </div>

      <div class="col-12">

        <div class="d-flex justify-content-md-between align-items-md-center align-items-end flex-md-row w-100">

          <mat-form-field class="w-100 standalone-field">
            <span
              matPrefix
              matTooltip="Website to crawl and scrape"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>http</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              type="text"
              placeholder="Website URL"
              name="url"
              [disabled]="crawling"
              [(ngModel)]="url"
              autocomplete="off">
          </mat-form-field>

          <mat-form-field class="w-100 standalone-field ms-2">
            <span
              matPrefix
              matTooltip="Completion model to use to generate response"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>help_outline</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <mat-select
              [(ngModel)]="chat_model"
              [disabled]="crawling"
              placeholder="Completion model ..."
              name="chat_model">
              <mat-select-trigger>
                {{chat_model?.id}}
              </mat-select-trigger>
              <mat-option
                class="multiline-mat-option"
                *ngFor="let idx of chat_models"
                [value]="idx">
                <span class="d-block name-line" #typeName>
                  {{idx.id}}
                </span>
                <span class="d-block description-line">
                  Owned by {{idx.owned_by}}
                </span>
              </mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field class="w-100 standalone-field ms-2">
            <span
              matPrefix
              matTooltip="Maximum number of URLs to crawl"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>get_app</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              type="number"
              min="1"
              max="1250"
              placeholder="Max URLs"
              name="max"
              [disabled]="crawling"
              [(ngModel)]="max"
              autocomplete="off">
          </mat-form-field>

          <mat-form-field class="w-100 standalone-field ms-2">
            <span
              matPrefix
              matTooltip="Choose a flavor or persona for your chatbot"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>person</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <mat-select
              [(ngModel)]="flavor"
              [disabled]="isLoading || crawling"
              placeholder="Flavor"
              name="flavor">
              <mat-option
                *ngFor="let idx of flavors"
                [matTooltip]="idx.description"
                matTooltipPosition="after"
                [value]="idx">
                {{idx.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <mat-checkbox
            [(ngModel)]="autocrawl"
            [disabled]="crawling"
            name="autocrawl"
            class="mx-4"
            matTooltip="If checked will automatically re-crawl and scrape the website once each day"
            labelPosition="before"
            color="primary">Auto crawl</mat-checkbox>

          <mat-checkbox
            [(ngModel)]="vectorize"
            [disabled]="crawling"
            name="vectorize"
            class="mx-4"
            labelPosition="before"
            matTooltip="If checked will vectorize your snippets after crawling is done"
            color="primary">Vectorize</mat-checkbox>

          <mat-checkbox
            [(ngModel)]="auto_destruct"
            [disabled]="crawling"
            name="auto_destruct"
            class="mx-4"
            labelPosition="before"
            matTooltip="If checked will automatically destroy your chatbot after 7 days"
            color="primary">Auto destruct</mat-checkbox>

          <button
            mat-flat-button
            color="primary"
            [disabled]="!goodWebsite() || crawling"
            class="ms-3 px-5">
            Start
          </button>

        </div>
        
      </div>

    </form>

    <div class="row" *ngIf="sqlIte && crawling" class="mt-4 messages" id="messageWrapper">

      <div
        *ngFor="let idx of messages; index as i"
        [class]="'msg ' + idx.type"
        [id]="'m_' + i">{{idx.message}}</div>

    </div>

    <div class="text-end mt-4" *ngIf="crawling">
      <button
        mat-flat-button
        [disabled]="!finished"
        color="primary"
        (click)="closeBotCreator()">
        Close
      </button>
    </div>

  </mat-card-content>
</mat-card>
